<template>
  <div class="tag-register">
    <el-row :gutter="30" class="kpi">
      <el-col :span="8">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="total-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.registerNum }}</div>
              <p>已注册标签</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.registerRate >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.registerRate >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.registerRate >= 0 ? 'up' : 'down']"
                  >{{ Math.abs(kpi.registerRate) }}%</span
                >
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="add-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.monthNew }}</div>
              <p>本月新增</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.monthNewRate >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.monthNewRate >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.monthNewRate >= 0 ? 'up' : 'down']"
                  >{{ Math.abs(kpi.monthNewRate) }}%</span
                >
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-row>
            <el-col :span="10">
              <div class="kpi-chart" id="pass-chart"></div>
            </el-col>
            <el-col :span="7">
              <div class="count">{{ kpi.approveNum }}</div>
              <p>本月审批通过</p>
            </el-col>
            <el-col :span="7">
              <div class="sign">
                <span class="arrow" :class="[kpi.approveNumRate >= 0 ? 'up' : 'down']">
                  <i :class="[kpi.approveNumRate >= 0 ? 'el-icon-top' : 'el-icon-bottom']"></i>
                </span>
                <span class="rate" :class="[kpi.approveNumRate >= 0 ? 'up' : 'down']">
                  {{ Math.abs(kpi.approveNumRate) }}%
                </span>
              </div>
              <p>月</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-card
      v-loading="checking"
      element-loading-text="批量审批中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0,0,0,0.4)"
      :class="{ 'download-table': isDownload }"
    >
      <tag-content-header add search refresh @toolFun="toolFun" :settingData="columns">
        <template #title>
          <span>标签注册列表</span>
        </template>
        <template #toolsPre>
          <el-radio-group v-model="listType">
            <el-radio label="relaRegisterPage">与我相关</el-radio>
            <el-radio label="myRegisterPage">我提交的</el-radio>
            <el-radio label="waitRegisterPage">等我处理</el-radio>
            <el-radio label="handleRegisterPage">已处理</el-radio>
            <el-radio label="registerPage">全部</el-radio>
          </el-radio-group>
          <el-tooltip effect="dark" content="饼图" placement="top">
            <el-button type="primary" plain circle @click="showPieDialog">
              <icon-svg name="iconPie"></icon-svg>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="导出注册审批标签" placement="top" v-show="listType === 'waitRegisterPage'">
            <el-button type="primary" plain circle @click="isDownload = !isDownload">
              <icon-svg name="iconDownload"></icon-svg>
            </el-button>
          </el-tooltip>
        </template>
        <template #tools>
          <el-button
            type="primary"
            class="addBtn"
            @click="bathConfirm"
            v-if="$auth('ast:astTagRegister:batchUpdate') && listType === 'waitRegisterPage'"
          >
            <i class="el-icon-check"></i>一键审批
          </el-button>
        </template>
      </tag-content-header>
      <tag-table
        ref="table"
        @refresh="getList"
        :data="dataList"
        :loading="loading"
        :columns="columns"
        :params="params"
        :total="totalSize"
        @rowClick="rowClick"
        :selection="isDownload"
        rowKey="tagId"
      >
        <template #requirerNname="{ scope }">
          {{ $name(scope.row, 'requirerNname', 'requirerName') }}
        </template>
        <template #handlerNnm="{ scope }">
          {{ $name(scope.row, 'handlerNnm', 'handler') }}
        </template>
      </tag-table>
      <el-button type="primary" size="medium" class="download-btn" v-if="isDownload" @click="downloadResult">
        确定导出
      </el-button>
    </el-card>
    <creation-selection ref="creationSelection" :selections="selections" @select="selectWay"></creation-selection>
    <register-single ref="registerSingle" @callback="getList"></register-single>
    <register-chart ref="registerChart"></register-chart>
    <register-batch ref="registerBatch" @callback="getList"></register-batch>
  </div>
</template>

<script>
import creationSelection from '@/components/tag-creation-selection'
import registerSingle from './single/register-single'
import registerChart from './components/pie-dialog'
import registerBatch from './batch/register-batch'
import * as echarts from 'echarts'
export default {
  components: {
    creationSelection,
    registerSingle,
    registerChart,
    registerBatch
  },
  data() {
    return {
      fileType: 1,
      fileCharset: 'GBK',
      charsetList: ['Big5', 'GB18030', 'GBK', 'US-ASCII', 'UTF-16', 'UTF-8', 'x-mswin-936'],
      listType: 'relaRegisterPage',
      kpi: {
        registerNum: 0,
        registerRate: 0,
        monthNew: 0,
        monthNewRate: 0,
        approveNum: 0,
        approveNumRate: 0
      },
      selections: {
        title: '如何注册标签？',
        single: {
          head: '在线注册一个标签',
          content: '在线填写标签基本信息，标签来源表信息。经审批后完成标签注册'
        },
        batch: {
          head: '通过标签注册模板批量注册多个标签',
          content: '下载并填写标签注册模板，一次性注册多个标签。经审批后进行标签开发。'
        }
      },
      checking: false,
      loading: false,
      isDownload: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '注册状态',
          prop: 'registerStatus',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [
            { key: '注册登记—基本信息', value: '注册登记—基本信息' },
            { key: '注册登记—来源表信息', value: '注册登记—来源表信息' },
            { key: '注册登记—责任人信息', value: '注册登记—责任人信息' },
            { key: '注册审批', value: '注册审批' },
            { key: '注册上线', value: '注册上线' }
          ],
          dot: {
            '注册登记—基本信息': '#ff99c3',
            '注册登记—来源表信息': '#f6bd16',
            '注册登记—责任人信息': '#8b6cf3',
            注册审批: '#2e6be6',
            注册上线: '#52cea7'
          },
          align: 'center'
        },
        {
          show: true,
          label: '注册人',
          prop: 'requirerNname',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '注册时间',
          prop: 'submitTm',
          align: 'center'
        },
        {
          show: true,
          label: '处理人',
          prop: 'handlerNnm',
          search: true,
          searchKey: '',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    this.getKpi()
    this.getList()
  },
  watch: {
    listType() {
      if (this.isDownload) this.$refs.table.clearSelect()
      this.getList()
    },
    isDownload(val) {
      if (!val) this.$refs.table.clearSelect()
    }
  },
  methods: {
    rowClick(row) {
      if (row.tagId) this.handleEdit(row)
    },
    initKpi(chartName, data, params) {
      let myChart = echarts.init(document.getElementById(chartName))
      let xData = []
      let yData = []
      data.forEach(v => {
        xData.push(v.kpiSn)
        yData.push(v.kpiValue)
      })
      let option = {
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        xAxis: {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: xData
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            data: yData,
            type: 'line',
            symbol: 'none',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: params.lineColor[0]
                  },
                  {
                    offset: 1,
                    color: params.lineColor[1]
                  }
                ])
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: params.areaColor[0]
                },
                {
                  offset: 1,
                  color: params.areaColor[1]
                }
              ])
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getKpi() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagRegister/kpi'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.kpi = data.data
          this.initKpi('total-chart', data.data.totalRegisterList, {
            lineColor: ['#5ba2ed', '#6a58f7'],
            areaColor: ['#deedfb', '#dee4fb']
          })
          this.initKpi('add-chart', data.data.newRegisterList, {
            lineColor: ['#82f1c6', '#5cbaa5'],
            areaColor: ['#defbf0', '#daefeb']
          })
          this.initKpi('pass-chart', data.data.approveRegisterList, {
            lineColor: ['#ff8e79', '#f9558f'],
            areaColor: ['#ffe8e3', '#fedae7']
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astTagRegister/${this.listType}`),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          if (this.isDownload) return
          this.$refs.creationSelection.showDialog()
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          if (this.isDownload) this.$refs.table.clearSelect()
          this.getList()
          break
      }
    },
    selectWay(way) {
      this.$refs[`register${way}`].showDrawer()
    },
    handleEdit(item) {
      this.$refs.registerSingle.showDrawer(item)
    },
    showPieDialog() {
      let situation =
        this.listType === 'registerPage'
          ? { type: 1, name: '全部' }
          : this.listType === 'myRegisterPage'
          ? { type: 2, name: '我提交的' }
          : this.listType === 'waitRegisterPage'
          ? { type: 3, name: '等我处理' }
          : this.listType === 'handleRegisterPage'
          ? { type: 4, name: '已处理' }
          : { type: 5, name: '与我相关' }
      this.$refs.registerChart.showDialog(situation)
    },
    downloadResult() {
      let selectedRow = this.$refs.table.getSelectList()
      if (!selectedRow.length) {
        this.$message.error('请选择需要导出的标签！')
        return
      }
      let tagList = []
      selectedRow.forEach(item => {
        tagList.push(item.tagId)
      })
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagRegister/downloadCheck'),
        method: 'post',
        data: this.$ajax.setData({
          tagList
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$dlFile(data.data)
          this.$message.success(data.msg)
          this.$refs.table.clearSelect()
          this.isDownload = false
          this.getList()
        } else {
          this.$message.error(data.msg)
        }
        this.loading = false
      })
    },
    bathConfirm() {
      this.$confirm('确认审批全部待处理标签？')
        .then(() => {
          let messageBox = document.getElementsByClassName('el-message-box__wrapper')
          messageBox[0].focus() // 防止按空格键重复确定
          this.checking = true
          this.$ajax({
            url: this.$ajax.setUrl('ast/astTagRegister/batchConfirm'),
            method: 'post',
            data: this.$ajax.setData(),
            timeout: 0
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.getList()
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.checking = false
          })
        })
        .catch(() => {
          return
        })
    }
  }
}
</script>

<style lang="scss">
.tag-register {
  .el-radio {
    margin-right: 20px;
  }
  .kpi {
    text-align: center;
    margin-bottom: 20px;
    .el-card {
      padding: 10px 0;
      .el-card__body {
        padding: 20px 10px;
      }
    }
    .el-row {
      padding: 10px 0;
    }
    .kpi-chart {
      width: 100%;
      height: 65px;
    }
    .count {
      font-size: 35px;
      font-weight: bold;
      height: 50px;
      color: $theme-color;
    }
    .sign {
      padding-top: 10px;
      height: 50px;
    }
    .arrow {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      line-height: 20px;
      border-radius: 50%;
      &.up {
        background-color: #2fc866;
      }
      &.down {
        background-color: #ee6861;
      }
      i {
        font-weight: bold;
        color: #fff;
        margin-top: 5px;
      }
    }
    .rate {
      font-size: 20px;
      padding-top: 5px;
      &.up {
        color: #2fc866;
      }
      &.down {
        color: #ee6861;
      }
    }
    p {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .download-table {
    position: relative;
    .download-btn {
      background: #2b57d9;
      border-color: #2b57d9;
      position: absolute;
      right: 20px;
      bottom: 17.5px;
    }
    .el-pagination {
      margin-right: 100px;
    }
    .addBtn {
      border-color: #939393 !important;
      background-color: #909399 !important;
    }
  }
  .tag-table .el-table__row {
    cursor: pointer;
  }
  .el-loading-mask {
    .el-icon-loading,
    .el-loading-text {
      font-size: 25px;
      color: #fff;
    }
  }
}
</style>
